<template>
  <div>
    <div class="flex-center-align">
      <div class="img-con flex-center-align" :style="{ width: offsetw + 'px', height: offseth + 'px' }">
        <img class="xximg" :style="imgStyle" :src="imgUrl" />
      </div>
    </div>
    <div class="img-foot flex-center mt20">
      <el-button icon="ZoomIn" size="small" @click="changeScale(1)"></el-button>
      <el-button icon="ZoomOut" size="small" @click="changeScale(0)"></el-button>
      <el-button icon="Refresh" size="small" @click="changeRefresh()"></el-button>
      <el-button icon="RefreshLeft" size="small" @click="rotateLeft()"></el-button>
      <el-button icon="RefreshRight" size="small" @click="rotateRight()"></el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "FilePreviewImg",
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    //显示宽度
    showWidth: {
      type: Number,
      default: 0
    },
    //显示高度
    showHeight: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      enableTransition: true, //是否有动画
      offsetw: 500, //宽度
      offseth: 500, //宽度
      rotateNum: 0, //旋转角度
      scaleNum: 1, //放大倍数
    }
  },
  computed: {
    // 图片样式
    imgStyle() {
      const style = {
        transform: `scale(${this.scaleNum}) rotate(${this.rotateNum}deg)`,
        transition: this.enableTransition ? 'transform .3s' : '',
      };
      return style;
    },
  },
  created() {
    this.setWidth();
  },
  methods: {
    //
    setWidth() {
      let offsetHeight = document.body.offsetHeight;
      //设置了显示尺寸
      this.offsetw = this.showWidth ? this.showWidth : offsetHeight * 0.65;
      this.offseth = this.showHeight ? this.showHeight : offsetHeight * 0.65;
    },
    //复位
    changeRefresh() {
      this.scaleNum = 1;
      this.rotateNum = 0;
      this.enableTransition = false;
    },
    //缩放
    changeScale(type) {
      this.enableTransition = true;
      if (type) {
        this.scaleNum += 0.1
      } else {
        if (this.scaleNum > 0.2) {
          this.scaleNum -= 0.1
        }
      }
    },
    //旋转
    rotateLeft() {
      this.enableTransition = true;
      this.rotateNum -= 90
    },
    //旋转
    rotateRight() {
      this.enableTransition = true;
      this.rotateNum += 90;
    },
  }
};
</script>

<style lang="scss" scoped>
.img-con {
  position: relative;
  height: 500px;
  z-index: 1;
}

.xximg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.img-foot {
  position: relative;
  z-index: 2;
}
</style>
